<template>
  <el-dialog
    title="资产类型信息"
    :visible.sync="isShow"
    width="600px"
    :before-close="close"
    :destroy-on-close="true"
    :lock-scroll="false"
    :close-on-click-modal="false"
    @closed="editForm = { is_out: 'False'}"
  >
    <el-form
      v-if="itemType === 'web'"
      ref="formData"
      :model="editForm"
      :rules="editRules"
      label-width="100px"
      @submit.native.prevent
    >
      <el-form-item label="域名地址:" prop="key">
        <el-input
          v-model="editForm.key"
          placeholder="请输入域名地址"
          clearable
        />
      </el-form-item>
      <el-form-item label="开发语言:" prop="language">
        <el-select
          v-model="editForm.language"
          placeholder="请选择开发语言"
          style="width: 100%"
        >
          <el-option
            v-for="(item, key) in language"
            :key="'type' + key"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="中间件:" prop="middleware">
        <el-input
          v-model="editForm.middleware"
          placeholder="请输入中间件"
          clearable
        />
      </el-form-item>
      <el-form-item label="中间件版本:" prop="middleware_version">
        <el-input
          v-model="editForm.middleware_version"
          placeholder="请输入中间件版本"
          clearable
        />
      </el-form-item>
      <el-form-item label="开发框架:" prop="web_framwork">
        <el-input
          v-model="editForm.web_framwork"
          placeholder="请输入开发框架"
          clearable
        />
      </el-form-item>
      <el-form-item label="框架版本:" prop="web_framwork_version">
        <el-input
          v-model="editForm.web_framwork_version"
          placeholder="请输入框架版本"
          clearable
        />
      </el-form-item>
    </el-form>
    <el-form
      v-if="itemType === 'os'"
      ref="formData"
      :model="editForm"
      :rules="editRules"
      label-width="100px"
      @submit.native.prevent
    >
      <el-form-item label="IP地址:" prop="key">
        <el-input
          v-model="editForm.key"
          placeholder="请输入IP地址"
          clearable
        />
      </el-form-item>
      <el-form-item label="主机名:" prop="hostname">
        <el-input
          v-model="editForm.hostname"
          placeholder="请输入主机名"
          clearable
        />
      </el-form-item>
      <el-form-item label="操作系统:" prop="os">
        <el-input
          v-model="editForm.os"
          placeholder="请输入操作系统"
          clearable
        />
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button @click="close">取消</el-button>
      <el-button
        type="primary"
        :loading="editLoading"
        @click="updateAssetType"
      >保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getWebLanguage } from '@/api/asset'
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    itemType: {
      type: String,
      default: ''
    },
    ruls: {
      type: Object,
      default: () => { }
    },
    typeInfo: {
      type: Object,
      required: true
    },
    isShow: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      editForm: {},
      assetType: [],
      language: [],
      editLoading: false
    }
  },
  computed: {
    editRules() {
      return {}
    },
    updateUrl() {
      let url = ''
      switch (this.itemType) {
        case 'web':
          url = `/asset/baseinfo/update/web/${this.assetId}/`
          break
        case 'os':
          url = `asset/baseinfo/update/os/${this.assetId}/`
          break
        default:
          break
      }
      return url
    },
    assetId() {
      return this.$store.state.asset.assetInfo.id
    }
  },
  mounted() {
    this.getLanguageSelect()
    this.setFormValue()
  },
  methods: {
    close() {
      this.$emit('close')
    },
    updateAssetType() {
      this.$http.post(this.updateUrl, this.editForm).then(res => {
        if (res.data.code === 0) {
          this.close()
          this.$emit('updateSucceed', this.editForm)
          this.$store.dispatch('asset/getAssetInfo', this.assetId)
          this.$message.success('更新成功')
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },
    getLanguageSelect() {
      getWebLanguage().then(res => {
        this.language = res.data.data
      })
    },
    setFormValue() {
      this.editForm = Object.assign({}, this.typeInfo)
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
